<template>
	<view class="container">
<!-- 		<uni-section class="mb-10" :title="merchant.name">
			<template v-slot:right>
				<button class="add-btn" @click="addRecord" type="primary" size="mini" v-if="checkPermi(['system:record:add'])">新增收运记录</button>
			</template>
		</uni-section> -->

		<!-- 分页组件 -->
		<uni-pagination class="pagination" :current="pageNum" :total="total" :pageSize="pageSize"
			@change="handlePageChange" />

		<scroll-view class="scroll-container" scroll-y style="height: calc(100vh - 160rpx)">
			<view v-for="record in records" :key="record.id" class="record-item">
				<view class="record-header">
					<text class="merchant-id">商户名称: {{ record.name }}</text>
					<view class="action-btns">
						<!--            <button class="edit-btn" @click="editRecord(record.id)">编辑</button>-->
						<!-- <button class="delete-btn" @click="deleteRecord(record.id)">删除</button> -->
					</view>
				</view>
				<view class="record-content">
					<view class="field-row">
						<text class="label">操作人:</text>
						<text class="value">{{ record.userName }}</text>
					</view>
					<view class="field-row">
						<text class="label">收运时间:</text>
						<text class="value">{{ record.collectionDate }}</text>
					</view>
					<view class="field-row">
						<text class="label">实际到达时间:</text>
						<text class="value">{{ record.arriveTime }}</text>
					</view>
					<view class="field-row" v-if="record.type.includes(2)">
						<text class="label">地上油收油量:</text>
						<text class="value">{{ record.groundQuantity }} 公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(2) && checkPermi(['system:record:price'])">
						<text class="label">地上油单价:</text>
						<text class="value">{{ record.groundPrice }} 元/公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(3)">
						<text class="label">地下油收油量:</text>
						<text class="value">{{ record.undergroundQuantity }} 公斤</text>
					</view>
					<view class="field-row" v-if="record.type.includes(1)">
						<text class="label">灶台油收油量:</text>
						<text class="value">{{ record.stoveQuantity }} 公斤</text>
					</view>
					<view class="field-row">
						<text class="label">车牌号:</text>
						<text class="value">{{selectDictLabel(options, record.carNumber)}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listRecord,
		deleteRecord
	} from '@/api/system/record.js';
	import {
		getMerchant
	} from "@/api/system/merchant.js"
import {
	getDicts
} from "@/api/system/dict/data";
	import {
		selectDictLabel  //主要是这个
	} from '@/utils/ruoyi'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

	
	export default {
		//name:"收运统计跳转",
		data() {
			return {
				options: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				records: [],
				record: {
					userId: '',
					userName: '',
					type: ''
				}
			};
		},
		onLoad(options) {
			// 加载数据
			// this.fetchData();
			console.log(options)
			// 获取扫码中商户id
			this.record.userName = decodeURIComponent(options.userName);

			// 查询商户信息
			// this.queryMerchant(this.merchant.id)
			
		},
		onShow(options) {
			// 加载数据
			this.fetchData();
		},
		methods: {
			checkPermi,
			checkRole,
			selectDictLabel,
			// 加载数据
			async fetchData() {
				try {
					// 数据字典
					await getDicts("sys_car_number").then(response => {
						this.options = response.data.map(item => ({
							value: item.dictValue,
							text: item.dictLabel
						}))
					})
					
					const res = await listRecord({
						'pageNum': this.pageNum,
						'pageSize': this.pageSize,
						'userName': this.record.userName
					});
					this.records = res.rows;
					this.total = res.total;
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			// 翻页
			handlePageChange(e) {
				this.pageNum = e.current;
				this.fetchData();
			},
			// 删除
			async deleteRecord(id) {
				uni.showModal({
					title: '确认删除',
					content: '是否删除该记录？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await deleteRecord(id);
								uni.showToast({
									title: '删除成功'
								});
								this.fetchData();
							} catch (error) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 跳转新增页面
			addRecord() {
				uni.navigateTo({
					url: `/pages/record/add?merchantId=` + this.merchant.id + `&merchantName=` + this.merchant.name + `&type=` + this.merchant.type
				});
			},
			async queryMerchant(id) {
				try {
					const res = await getMerchant(id);
					this.merchant.name = res.data.name;
					this.merchant.type = res.data.type;
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
		}
	}
</script>



<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.toolbar {
		/* margin-bottom: 20rpx; */
	}

	.add-btn {}

	.pagination {
		margin: 20rpx 0;
	}

	.scroll-container {
		border-radius: 12rpx;
		background-color: white;
		overflow: hidden;
	}

	.record-item {
		margin: 10rpx 0;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #e5e5e5;
		padding-bottom: 10rpx;
	}

	.merchant-id {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.action-btns {
		display: flex;
		gap: 10rpx;
	}

	.edit-btn {
		background-color: #55B3FF;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.delete-btn {
		background-color: #FF6666;
		color: white;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
	}

	.field-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		width: 300rpx;
		color: #666;
		font-weight: bold;
	}

	.value {
		flex: 1;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 响应式布局 */
	@media (min-width: 750rpx) {
		.scroll-container {
			width: 70%;
			margin: 0 auto;
		}
	}
</style>